<template>
	<view>
		<status-bar title="处理异常" />
        <view class="filterArea bgwhite d-flex" :style="{top: totalHeight + 'px'}">
            <view class="flex-1 flexac" @click="openDatetimePicker('start')">
                <view class="size28 m-right10">{{ startTime || '开始时间' }}</view>
                <text class="iconfont icon-xiangxia size24 color-999"></text>
            </view>
            <view class="flex-1 flexac" @click="openDatetimePicker('end')">
                <view class="size28 m-right10">{{ endTime || '结束时间' }}</view>
                <text class="iconfont icon-xiangxia size24 color-999"></text>
            </view>
        </view>
        <view class="padding20 m-top90">
            <view class="padding20 d-flex a-center m-bot20" v-for="(item,index) in list" :key="index">
                <view class="size28 color-222 m-right10">{{ item.name }} -</view>
                <view class="size28 color-222 m-right10">{{ item.adcDay }} -</view>
                <view class="flex-1 size28" style="color: #F83948;">{{ item.descri }}</view>
            </view>

            <up-empty :show="noData" mode="list" marginTop="100"></up-empty>
        </view>

        <up-datetime-picker :show="showDatetimePicker" v-model="datetime" mode="date" @cancel="showDatetimePicker = false" @confirm="confirmDatetime"></up-datetime-picker>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
    import { onLoad, onReachBottom } from '@dcloudio/uni-app'
    import { useMainStore } from '@/stores/index'
    import { Toast } from '@/utils/utils.js'
    import Http from '@/utils/request.js'
    import statusBar from '../components/statusBar.vue'

    const mainStore = useMainStore()
	const totalHeight = computed(() => {
		return mainStore.statusBarHeight + mainStore.navBarHeight
	})

    const startTime = ref('')
    const endTime = ref('')
    const list = ref([])
    const page = ref(1)
    const limit = ref(10)
    const noData = ref(false)
    const noMore = ref(false)

    onLoad((e) => {
        if(e.startTime) startTime.value = e.startTime
        if(e.endTime) endTime.value = e.endTime
        getList()
    })

    const getList = () => {
        noData.value = false
		noMore.value = false
        Http.get({
            url: '/hr/adc/getAbnLists',
            data: {
                startTime: startTime.value,
                endTime: endTime.value,
                pageNum: page.value,
                pageSize: limit.value
            }
        }).then(res => {
            if(res.code != 0) return Toast(res.msg)
            let result = res.rows || []
            list.value = page.value == 1 ? result : list.value.concat(result)
            if(!list.value.length) noData.value = true
            if(result.length < limit.value) noMore.value = true
        })
    }

    const showDatetimePicker = ref(false)
    const datetime = ref(Date.now())
    const currentType = ref('')
    const openDatetimePicker = (type) => {
        currentType.value = type
        showDatetimePicker.value = true
    }
    const confirmDatetime = (e) => {
        let date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
        if(currentType.value == 'start') startTime.value = date
        if(currentType.value == 'end') endTime.value = date
        showDatetimePicker.value = false
        if(startTime.value && endTime.value) {
            page.value = 1
            getList()
        }
    }

    onReachBottom(() => {
        if(noMore.value) return
        page.value ++
		getList()
    })
</script>

<style lang="scss" scoped>
	.filterArea {
        width: 100%;
        height: 90rpx;
        position: fixed;
        left: 0;
        z-index: 11;
    }
</style>
